<style rel="stylesheet/scss" lang="scss" scoped>
.mid {
  line-height: 140px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip">
      <template>
        <el-form :inline="true" class="filter">
          <el-form-item label="">
            <el-select placeholder="证书种类" v-model="filter.params.certCategoryId" clearable>
              <el-option v-for="option in filter.options.gories" :key="option.id" :label="option.name" :value="option.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="证书状态" v-model="filter.params.statusCode" clearable>
              <el-option v-for="option in filter.options.certStatus" :label="option.labelZhCh" :value="+option.value" :key="option.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入证书项目号" v-model="filter.params.certProjectNo" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-cascader clearable :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="filter.params.productCategory"></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入产品型号" v-model="filter.params.plmModelNo" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入证书编号" v-model="filter.params.certNo" clearable>
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="success" @click="search">查询</el-button>
          <el-button class="filter-item" type="warning" @click="$router.push({path:'list/add'})">创建证书</el-button>
        </el-form>
      </template>
    </div>
    <custom-card title="证书列表" class="mt-30">
      <template>
        <el-table class="" border fit highlight-current-row style="width: 100%" :data="pageData.list">
          <!-- <el-table-column min-width="20%" align="center" label="选择" prop=""></el-table-column> -->
          <el-table-column width="80px" align="center" label="序号">
            <template slot-scope="scope">
              {{(pageData.params.page-1)*pageData.params.limit+(scope.$index+1)}}
            </template>
          </el-table-column>
          <el-table-column min-width="20%" align="center" label="证书项目号" prop="certProjectNo"></el-table-column>
          <el-table-column min-width="20%" align="center" label="证书编号" prop="certNo"></el-table-column>
          <el-table-column min-width="20%" align="center" label="文件名称" prop="fileName"></el-table-column>
          <el-table-column min-width="20%" align="center" label="证书种类" prop="certCategory"></el-table-column>
          <el-table-column min-width="20%" align="center" label="证书有效期" prop="certEffectiveDate"></el-table-column>
          <el-table-column min-width="20%" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.certStatus===0">有效</span>
              <span v-if="scope.row.certStatus===1">已过期</span>
              <span v-if="scope.row.certStatus===2">已作废</span>
            </template>
          </el-table-column>
          <el-table-column min-width="20%" align="center" label="编辑状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status===0">草稿</span>
              <!-- <span v-if="scope.row.status===1">审核中</span> -->
              <span v-if="scope.row.status===2">已发布</span>
              <span v-if="scope.row.status===3">已删除</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="250px" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="$router.push({path:'list/detail',query:{id:scope.row.id}})">查看</el-button>
              <el-button size="small" type="primary" v-if="scope.row.status===0" @click="$router.push({path:'list/edit',query:{id:scope.row.id}})">编辑</el-button>
              <!-- <el-button size="small" type="success" v-if="scope.row.status===2||scope.row.status===1" @click="$router.push({path:'',query:{modelPbsId:scope.row.id}})">下载</el-button> -->
              <el-button size="small" type="primary" v-if="scope.row.status===2 && scope.row.certStatus===0" @click="$router.push({path:'list/edit',query:{id:scope.row.id, update: true}})">变更</el-button>
              <el-button size="small" type="danger" v-if="scope.row.status===0" @click="handleDelete(scope.row.id, 0)">删除</el-button>
              <el-button size="small" type="danger" v-if="scope.row.status===2 && scope.row.certStatus===0" @click="handleDelete(scope.row.id, 1)">作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
      </template>
    </custom-card>
  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
import * as baseApi from '@/api/common/index';
import * as prodApi from '@/api/product/index';
import * as listApi from '@/api/cert/list/index';
import CustomCard from '@/components/CustomCard/index';
import ListRefresh from '@/components/Mixin/listRefresh.js'
export default {
  name: 'user',
  components: {
    CustomCard
  },
  mixins: [ListRefresh],
  data() {
    return {
      filter: {
        options: {
          gories: [],
          certStatus: []
        },
        params: {}
      },
      activeCard: 'first',
      productCategory: [],
      pageData: {
        params: {
          page: 1,
          limit: 10,
          total: 100
        },
        list: []
      }
    };
  },
  created() {
    this.getList();
    this.getDict();
    this.getPdsConfCategoryTree();
    this.getGories();
    this.getcertStatus();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    /* 列表页刷新 */
    refresh() {
      this.pageData.params.page = 1;
      this.filter.params = {};
      this.getList();
    },
    // 获取字典选项
    getDict() {
      const codes =
        'prod_file_sales_area,prod_file_pro_status,prod_file_biz_model,prod_file_market_pos';
      baseApi.getTypesValue(codes).then(res => {
        const arr = codes.split(',');
        // this.filter.options = res.data;
      });
    },
    // 获取证书种类下拉数据finished
    getGories() {
      listApi.gories().then(res => {
        this.filter.options.gories = res.data;
        console.log(res.data)
      });
    },
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        console.log('getPdsConfCategoryTree', res);
        this.productCategory = res.data;
      });
    },
    changePage(pageData) {
      this.pageData.params.page = pageData.page;
      this.getList();
    },
    changeSize(pageSize) {
      this.pageData.params.limit = pageSize;
      this.pageData.params.page = 1;
      this.getList();
    },
    // 获取证书列表数据
    getList(params = {}) {
      const postParams = { ...this.pageData.params, ...params };
      listApi.getList(postParams).then(response => {
        if (response.code === 200) {
          this.pageData.list = response.data.rows;
          this.pageData.params.total = response.data.total;
        }
      });
    },
    // 获取证书状态下拉列表
    getcertStatus() {
      const params = 'cert_dict_cstatus'
      listApi.certStatus(params).then(res => {
        this.filter.options.certStatus = res.data.rows;
        console.log(res.data)
      });
    },
    /* 删除 type: 0=删除，1=作废 */
    handleDelete(id, type) {
      this.$confirm('此操作将' + (type ? '作废' : '永久删除') + '该条数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        listApi[type ? 'cancelCert' : 'delCert'](id).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: (type ? '作废' : '删除') + '成功!'
            });
            this.getList()
          }
        })
      })
    },
    search() {
      console.log(this.filter.params);
      const params = { ...this.filter.params };
      if (params.productCategory && params.productCategory.length) {
        params.productCategory = params.productCategory.slice(-1)[0];
      }
      this.pageData.params.page = 1;
      this.getList(params);
    }
  }
};

</script>
